// pages/adminEnd/chart/chart.js
import * as echarts from '../../../ec-canvas/echarts'
let chart = null
let secondChart = null
let thirdChart =null
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec:{
      onInit: initChart
    },
    ec2:{
      onInit: initChart2
    },
    ec3:{
      onInit: initChart3
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
})
//第一张图表
function initChart(canvas,width,height,dpr){
  chart = echarts.init(canvas,null,{
    width:width,
    height:height,
    devicePixelRatio: dpr
  })
  //图标初始化
  canvas.setChart(chart)
  let option = getOption() //echarts的配置信息
  chart.setOption(option)
  return chart
}
function getOption(){
  return {
    title:{
      text:'草木染文创空间收益',
      left:'center',
      top: '10%', 
      textStyle: {
        color: '#333', // 标题颜色
        fontSize: 16, // 标题字体大小
        fontStyle: 'normal', // 标题字体样式，normal为默认
        fontWeight: 'bold ' // 标题字体粗细，bold为粗体  
      }  
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
        axisTick: {
          alignWithLabel: true
        }
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: 'Direct',
        type: 'bar',
        barWidth: '60%',
        data: [150, 230, 224, 218, 135, 147, 260]
      }
    ]
  };
}

//第二张图表
function initChart2(canvas,width,height,dpr){
  secondChart = echarts.init(canvas,null,{
    width:width,
    height:height,
    devicePixelRatio: dpr
  })
  //图标初始化
  canvas.setChart(secondChart)
  let option = getOption2() //echarts的配置信息
  secondChart.setOption(option)
  return secondChart
}

function getOption2(){
  return {
      xAxis: {
        type: 'category',
        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    };
}

//第三张图表
function initChart3(canvas,width,height,dpr){
  thirdChart = echarts.init(canvas,null,{
    width:width,
    height:height,
    devicePixelRatio: dpr
  })
  //图标初始化
  canvas.setChart(thirdChart)
  let option = getOption3() //echarts的配置信息
  thirdChart.setOption(option)
  return thirdChart
}

function getOption3(){
  return  {
    title: {
      text: '主要文创收益饼状图',
      left: '40%', 
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        left: '30%', 
        data: [
          { value: 1048, name: '扎染手绢' },
          { value: 735, name: '扎染围巾' },
          { value: 580, name: '扎染收纳袋' },
          { value: 484, name: '扎染杯垫' },
          { value: 300, name: '中国结' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
}

